<template>
    <div class="login-container shadow-lg">
        <header class="row align-items-center mt-3 mb-3">
            <div class="col center" id="title">家庭财务管理系统</div>
        </header>
        <main class="row align-items-center mt-3 mb-3">
            <form method="post" name="form" class="form" action>
                <div class="form-floating mt-3 mb-3">
                    <input
                        type="text"
                        required
                        name="username"
                        id="userName"
                        placeholder="用户名"
                        class="form-control border-0"
                        v-model="formData.username"
                    />
                    <label for="userName">用户名</label>
                </div>
                <div class="form-floating mt-3 mb-3">
                    <input
                        type="password"
                        required
                        name="password"
                        id="password"
                        placeholder="密码"
                        class="form-control border-0"
                        v-model="formData.password"
                    />
                    <label for="password">密码</label>
                </div>
                <div class="row mt-3 mb-3 align-items-center">
                    <div class="col-6 center">
                        <input
                            type="button"
                            class="btn btn-outline-dark"
                            value="注册"
                            id="register"
                            @click="register()"
                        />
                    </div>
                    <div class="col-6 center">
                        <input
                            type="button"
                            class="btn btn-primary"
                            value="登录"
                            id="login"
                            @click="login()"
                        />
                    </div>
                </div>
            </form>
        </main>
        <footer class="login-footer row align-items-end">
            <header
                class="mt-6 center"
                id="Copyright"
            >2022 &copy; Copyright 甘孜理塘小马珍珠 All Rights Reserved</header>
        </footer>
    </div>
</template>

<script>
import $ from "jquery"
import useStore from "./stores/user"

export default {
    setup() {
        var store = useStore()
        return { store }
    },
    data() {
        return {
            formData: {
                username: "",
                password: ""
            }
        }
    },
    methods: {
        login() {
            var formData = this.formData
            var _this = this
            $.post("/api/login", formData, function (data, status) {
                if (data.code === "success") {
                    _this.store.login(formData.username)
                    _this.$router.push("/")
                } else {
                    alert("用户名或密码错误")
                }
            }.bind(this))
        },
        register() {
            var formData = this.formData
            var _this = this
            $.post("/api/register", formData, function (data, status) {
                if (data.code === "success") {
                    alert("注册成功")
                } else {
                    alert("用户已存在")
                }
            }.bind(this))
        },
    }
}
</script>

<style>
#userName {
    background-color: #f0f3f8;
}

#password {
    background-color: #f0f3f8;
}

#title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: bold;
}

#Copyright {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 4px;
    font-weight: lighter;
}

body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    zoom: 1;
    background-image: url("background.jpg");
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center top;
    z-index: -100;
}
</style>
